import { Card, Descriptions, Button } from "antd"
import React, { useEffect, useState } from "react"
import { useNavigate, useParams } from "react-router-dom"

import { reqGetHospitalShow } from "@/api/hospital/hospitalLists"
import { IHospitalShow } from "@/api/hospital/model/hospitalListsType"

export default function HospitalShow() {
  //保存获取的医院详情数据
  const [hospitalShow, setHospitalShow] = useState<IHospitalShow>({
    bookingRule: {
      cycle: 10,
      releaseTime: "08:30",
      stopTime: "11:30",
      quitDay: -1,
      quitTime: "15:30",
      rule: [
        "西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号",
        "东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号",
      ],
    },
    hospital: {
      id: "622574cc36a9ba1be763dad8",
      createTime: "2022-03-07 10:58:20",
      updateTime: "2022-06-20 11:11:36",
      isDeleted: 0,
      param: {
        hostypeString: "三级甲等",
        fullAddress: "北京市市辖区西城区大望路",
      },
      hoscode: "1000_0",
      hosname: "北京协和医院",
      hostype: "1",
      provinceCode: "110000",
      cityCode: "110100",
      districtCode: "110102",
      address: "大望路",
      logoData: "",
      intro: "",
      route: "",
      status: 1,
    },
  })
  // 定义对象
  // 定义navigate对象
  const navigate = useNavigate()
  const { id } = useParams()

  useEffect(() => {
    getHospitalShow()
  }, [])

  // 定义获取医院详情页数据的函数
  async function getHospitalShow() {
    const result = await reqGetHospitalShow(id as string)
    setHospitalShow(result)
  }

  // 设置返回按钮事件处理函数
  const goBack = () => {
    navigate(-1)
  }

  return (
    <Card>
      {/* 基本信息 */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hospitalShow.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            className="hospital-img"
            src={"data:image/jpeg;base64," + hospitalShow.hospital.logoData}
            alt="logo"
            width={100}
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编号">
          {hospitalShow.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalShow.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalShow.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalShow.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      {/* 预约规则信息 */}
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 20, marginBottom: 20 }}>
        <Descriptions.Item label="预约周期">
          {hospitalShow.bookingRule.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospitalShow.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospitalShow.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {/* {hospitalShow.bookingRule.rule} */}
          {hospitalShow.bookingRule.rule.map((item, index) => {
            return (
              <p key={index as number}>
                {index + 1}、{item}
              </p>
            )
          })}
        </Descriptions.Item>
      </Descriptions>
      {/* 返回按钮 */}
      <Button onClick={goBack}>返回</Button>
    </Card>
  )
}
